{% load static %}
<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>B站爬取TOP100数据可视化</title>
    <!-- plugins:css -->
    <link rel="stylesheet" href="{% static 'css/vendors/mdi/css/materialdesignicons.min.css' %}">
    <link rel="stylesheet" href="{% static 'css/vendors/base/vendor.bundle.base.css' %}">
    <!-- endinject -->
    <!-- plugin css for this page -->
    <!-- End plugin css for this page -->
    <!-- inject:css -->
    <link rel="stylesheet" href="{% static 'css/style.css' %}">
    <!-- endinject -->
    <link rel="shortcut icon" href="{% static 'images/logo.png' %}" />
</head>

<body>
<div class="container-scroller">
    <div class="container-fluid page-body-wrapper full-page-wrapper">
        <div class="content-wrapper d-flex align-items-center auth px-0">
            <div class="row w-100 mx-0">
                <div class="col-lg-4 mx-auto">
                    <div class="auth-form-light text-left py-5 px-4 px-sm-5">
                        <div class="brand-logo">
                            <a href="{% url 'main:index' %}"><img src="{% static 'images/logo.svg' %}" alt="logo"></a>
                        </div>
                        <h4>New here?</h4>
                        <h6 class="font-weight-light">Signing up is easy. It only takes a few steps</h6>
                        <form class="pt-3" method="post" action="{% url 'login:register' %}">
                            {% csrf_token %}
                            <div class="form-group">
                                <input type="text" class="form-control form-control-lg" id="exampleInputUsername1" placeholder="用户名" name="username">
                            </div>
                            <div class="form-group">
                                <input type="text" class="form-control form-control-lg" id="exampleInputPhone1" placeholder="手机号" name="phone">
                            </div>
                            <div class="form-group">
                                <input type="password" class="form-control form-control-lg" id="exampleInputPassword1" placeholder="密码" name="password1">
                            </div>
                            <div class="form-group">
                                <input type="password" class="form-control form-control-lg" id="exampleInputPassword2" placeholder="再次输入密码" name="password2">
                            </div>
                            <div class="mt-3">
                                <button type="submit" class="btn btn-primary" style="width: 100%; height: 40px">注册</button>
                            </div>
                            <div class="text-center mt-4 font-weight-light">
                                Already have an account? <a href="{% url 'login:login' %}" class="text-primary">Login</a>
                            </div>
                        </form>
                        {% if error_message %}
                            <div class="alert alert-warning alert-dismissible fade show" role="alert">
                                <strong>哦天啊！！</strong> {{ error_message }}
                                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
        <!-- content-wrapper ends -->
    </div>
    <!-- page-body-wrapper ends -->
</div>
<!-- container-scroller -->
<!-- plugins:js -->
<script src="{% static 'css/vendors/base/vendor.bundle.base.js' %}"></script>
<!-- endinject -->
<!-- inject:js -->
<script src="{% static 'js/off-canvas.js' %}"></script>
<script src="{% static 'js/hoverable-collapse.js' %}"></script>
<script src="{% static 'js/template.js' %}"></script>
<!-- endinject -->
</body>

</html>
